<script>
import draggable from "vuedraggable";
export default {
  name: "DraggablePage",
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        {
          name: "group-name: 学习",
          tasks: [
            {
              id: "1",
              name: "task-线上课程",
            },
            {
              id: "2",
              name: "task-线下课程",
            },
          ],
        },
        {
          name: "group-name: 培训",
          tasks: [
            {
              id: "3",
              name: "task-线上考试",
            },
            {
              id: "4",
              name: "task-线下考试",
            },
          ],
        },
        {
          name: "group-name: 练习",
          tasks: [
            {
              id: "5",
              name: "task-作业",
            },
          ],
        },
      ],
    };
  },
  methods: {
    onChangeSort(e) {
      console.log("onChangeSort:", e);
    },
    onChangeTasksSort(e) {
      console.log("onChangeTasksSort:", e);
    },
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        console.log("list:", newVal, oldVal);
      },
    },
  },
};
</script>

<template>
  <div class="draggable-box">
    <draggable
      v-model="list"
      group="list"
      @start="drag = true"
      @end="drag = false"
      ghost-class="ghost"
      @change="onChangeSort"
    >
      <div class="list-group-box" v-for="(element, index) in list" :key="index">
        {{ element.id ? element.id + ": " + element.name : element.name }}

        <div v-if="element.tasks && !element.tasks.length" class="empty">
          <img src="@/assets/empty.svg" alt="" />
        </div>

        <template v-if="element.tasks">
          <draggable
            v-model="element.tasks"
            group="list"
            @start="drag = true"
            @end="drag = false"
            ghost-class="ghost"
            class="group"
            @change="onChangeTasksSort"
            :class="{ active: element.tasks.length === 0 }"
          >
            <div
              class="list-task-box"
              v-for="task in element.tasks"
              :key="task.id"
            >
              <span v-if="task.name">{{ task.id + ": " + task.name }}</span>
            </div>
          </draggable>
        </template>
      </div>
    </draggable>
  </div>
</template>

<style scoped lang="less">
.list-group-box {
  position: relative;
  background-color: #fff;
  padding: 16px;
  margin: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 4px #646cffaa;
  &:hover {
    // filter: drop-shadow(0 0 8px #646cffaa);
    box-shadow: 0 0 8px #646cffaa;
  }
}
.empty {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%, 0);
}

.group {
  min-height: 24px;
  padding: 16px 0;
  &.active {
    height: 150px;
  }
}

.list-task-box {
  background-color: #fff;
  padding: 16px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 4px #8bcef5e9;
  &:hover {
    // filter: drop-shadow(0 0 8px #8bcef5e9);
    box-shadow: 0 0 8px #8bcef5e9;
  }
}
</style>
